import { useRef, useState } from 'react'
import Button from 'src/components/Button'
import Block from 'src/components/Block' 
import s from './index.module.scss'
import r from 'src/reset.module.scss'
import {searchApi} from './api'
import List from '../List'

const td = {
  title: '搜索案例一',
  desc: '这是一种常规搜索方案，通过在input中输入搜索关键词，然后点击搜索按钮搜索结果'
}

// 常规搜索案例
export default function DemoOneNormal() {
  // const [text, setText] = useState('')
  const str = useRef('')
  const [list, setList] = useState<string[]>([])
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  function onSure() {
    setLoading(true)
    searchApi(str.current).then(res => {
      setList(res)
      setLoading(false)
      setError('')
    }).catch(err => {
      setLoading(false)
      setError(err)
    })
  }

  return (
    <Block className={s.container} title={td.title} desc={td.desc}>
      <div className={r.flex}>
        <input 
          className={s.input} 
          placeholder="请输入您要搜索的内容" 
          onChange={(e) => str.current = e.target.value} 
        />
        <Button 
          className={s.button} 
          onClick={onSure}
        >
          搜索
        </Button>
      </div>
      <List 
        list={list} 
        loading={loading}  
        error={error}
        renderItem={(item) => (
          <div key={item} className={s.item}>{item}</div>
          // <div key={item} className={s.item}>{`${str.current} + ${item}`}</div>
        )}
      />
    </Block>
  )
}

// 防抖、去重